import {getGuess} from '@/api/index';
import React from 'react';
import {View, StyleSheet, Text, FlatList, Image} from 'react-native';
import {IGuess} from '@/common/type';
import Touchable from '@/components/touchable';
import IconFont from '@/assets/iconfont';

interface IProps {
  goAlbum: (item: IGuess) => void;
}
class Guess extends React.Component<IProps> {
  state = {
    guesss: [],
  };

  async getGuessData() {
    const res = await getGuess();
    this.setState({
      guesss: res.data,
    });
  }
  componentDidMount(): void {
    this.getGuessData();
  }

  renderItem = ({item, index}: {item: IGuess; index: number}) => {
    const {goAlbum} = this.props;
    return (
      <Touchable style={style.item} onPress={() => goAlbum(item)}>
        <Image
          key={index}
          source={{
            uri: item.img,
          }}
          style={style.img}
        />
        <Text
          // 超过显示。。。
          numberOfLines={2}>
          {item.title}
        </Text>
      </Touchable>
    );
  };
  render(): React.ReactNode {
    const {guesss} = this.state;
    return (
      <View style={style.container}>
        <View style={style.header}>
          <View style={style.headerLeft}>
            <IconFont name="icon-xihuan" size={16} />
            <Text style={style.title}>猜你喜欢</Text>
          </View>
          <Touchable style={style.headerRight}>
            <Text style={style.title}>更多</Text>
            <IconFont name="icon-jiantou_liebiaoxiangyou_o" size={20} />
          </Touchable>
        </View>
        <FlatList data={guesss} renderItem={this.renderItem} numColumns={3} />
        <Touchable style={style.guesss} onPress={() => this.getGuessData()}>
          <IconFont name="icon-huanyihuan" size={16} color={'#f86442'} />
          <Text style={style.change}>换一批</Text>
        </Touchable>
      </View>
    );
  }
}

const style = StyleSheet.create({
  container: {
    backgroundColor: '#fff',
    borderRadius: 8,
    margin: 16,
  },
  img: {
    width: 100,
    height: 60,
    borderRadius: 8,
    marginBottom: 8,
  },
  item: {
    flex: 1,
    marginVertical: 8,
    marginHorizontal: 8,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 15,
    borderBottomColor: '#efefef',
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  headerLeft: {flexDirection: 'row', alignItems: 'center'},
  headerRight: {flexDirection: 'row', alignItems: 'center'},
  title: {
    color: '#6f6f6f',
    fontSize: 14,
    marginLeft: 2,
  },
  change: {
    color: '#f86442',
    marginLeft: 2,
  },
  guesss: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    marginBottom: 8,
  },
});

export default Guess;
